<template>
  <div>
    <!-- 头部分类列表 -->
    <van-tabs v-model="imagesActive" @change="getImgClassfyList" v-if="flag" swipeable>
      <van-tab title="全部" name="all">
        <!-- 全部图片 -->
        <div class="last_bottom">
          <div
            class="wid100"
            v-for="(item, index) in imagesAll"
            :key="index"
            @click="toImgDetail(item.id)"
          >
            <img v-lazy="item.img_url" class="wid_hei_100">
            <div class="buttom_info">
              <p class="info_title">{{item.title}}</p>
              <p class="info_detail">{{item.zhaiyao}}</p>
            </div>
          </div>
        </div>
      </van-tab>

      <!-- 图片列表分类 -->
      <van-tab v-for="item in imagesClassify" :title="item.title" :key="item.id">
        <!-- 图片列表 -->
        <div class="last_bottom">
          <div
            class="wid100"
            v-for="(item, index) in imagesDetail"
            :key="index"
            @click="toImgDetail(item.id)"
          >
            <img v-lazy="item.img_url" alt class="wid_hei_100">
            <div class="buttom_info">
              <p class="info_title">{{item.title}}</p>
              <p class="info_detail">{{item.zhaiyao}}</p>
            </div>
          </div>
        </div>
        <van-divider contentPosition="center">我是有底线的</van-divider>
      </van-tab>
    </van-tabs>
  </div>
</template>
           
<script>
import { getImgsClassify, getImgsList } from "../../api/index";
export default {
  data() {
    return {
      // 图片分类数据
      imagesClassify: [],
      imagesActive: 0,

      // 分类图片列表数据
      imagesDetail: [],

      // 全部图片列表数据
      imagesAll: [],
      //控制分页按钮加载完成后再显示
      flag: false
    };
  },
  async created() {
    let { data: imgsClassify } = await getImgsClassify();
    this.imagesClassify = imgsClassify.message;
    this.flag = true;
    this.getAllImgs();
  },
  methods: {
    // 点击图片分类，获取图片列表数据
    async getImgClassfyList(name, title) {
      console.log(name, title);
      // 点击全部按钮时
      if (name == "all") {
        this.getAllImgs();
        return;
      }
      let cateid = this.imagesClassify[name - 1].id;
      let { data: res } = await getImgsList(cateid);
      if (res.status !== 0) return Toast.fail("获取数据失败");
      this.imagesDetail = res.message;
    },

    // 获取全部图片数据函数封装
    async getAllImgs() {
      let idArr = [];
      for (var i = 0; i < this.imagesClassify.length; i++) {
        let num = this.imagesClassify[i].id;
        idArr.push(num);
      }
      let imgAll = [];

      // 利用递归获取所有数据
      async function fnc1(arr, i, all) {
        let { data: res } = await getImgsList(arr[i]);
        for (var j = 0; j < res.message.length; j++) {
          all.push(res.message[j]);
        }
        i++;
        if (i == arr.length) return;
        fnc1(arr, i, all);
      }
      fnc1(idArr, 0, imgAll);
      this.imagesAll = imgAll;
    },

    //点击跳转到商品详情页
    toImgDetail(id) {
      this.$router.push({ name: "imgDetail", query: { imgsid: id } });
    }
  }
};
</script>
<style scoped>
div.van-divider {
  margin: 8px 0;
}
.wid100 {
  overflow: hidden;
  display: flex;
  position: relative;
  flex: 100%;
  height: 300px;
  margin: 10px;
  margin-bottom: none;
  border-radius: 5px;
}

.wid_hei_100 {
  width: 100%;
  height: 100%;
}

.buttom_info {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 75px;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  color: #fff;
  padding: 4px 10px;
  box-sizing: border-box;
}

.info_title {
  width: 100%;
  height: 16px;
  margin: 5px 0 5px 8px;
  text-align: left;
}

.info_detail {
  /* width: 100%;
  margin: 5px 0 5px 8px;
  text-align: left; */
  text-align: left;
  margin: 6px 0;
  display: -webkit-box;
  /*控制显示行数*/
  -webkit-line-clamp: 2;
  /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;

  overflow: hidden;
}
</style>
